<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('登录')"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/ocean/css/ry-ui.css" th:href="@{/ocean/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
    <link href="../static/ocean/css/bice.css" th:href="@{/ocean/css/bice.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/prt.css" th:href="@{/ocean/css/prt.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/common.css" th:href="@{/ocean/css/common.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/datepicker3.css" th:href="@{/ocean/css/datepicker3.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/pagination.css" th:href="@{/ocean/css/pagination.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/style.css" th:href="@{/ocean/css/style.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/head.css" th:href="@{/ocean/css/head.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/index.css" th:href="@{/ocean/css/index.css}" rel="stylesheet"/>
</head>
<style>
    .el-row {
        background-color: #1844a8!important;
    }
    .cdcss {
        background-color: #1844a8!important;
    }
</style>
<body>
<div class="prt_cont1_box">
    <div class="prt_cont1">
     <!--   <div class="border_t left"></div>
        <p class="p_title left">产品浏览</p>
        <div class="border_t right"></div>
        <div class="clearfix"></div>-->
        <div style="display: flex;justify-content: center;width: 100%;margin-top: 100px">
            <div style="margin-top: 10px;margin-right: 100px;"><img src="./img/z.png"></div>
            <div style="font-size: 27px;">产品浏览</div>
            <div style="margin-top: 10px;margin-left: 100px;"><img src="./img/y.png"></div>
        </div>
        <input type="hidden" id="typeValue" th:value="${productType}"/>
        <div style="margin-left: 100px;margin-top: 100px">
            <div class="prtit_box1 left" onclick="changeType('N')">
                <div id="ptrtit_img1" class="ptrtit_img1_off"></div>
                <p class="prtit_ft">数值预报产品</p>
            </div>
            <div class="prtit_box2 left" onclick="changeType('A')">
                <div id="ptrtit_img2" class="ptrtit_img2_off"></div>
                <p class="prtit_ft">综合预报产品</p>
            </div>
            <div class="prtit_box3 left" onclick="changeType('R')">
                <div id="ptrtit_img3" class="ptrtit_img3_off"></div>
                <p class="prtit_ft">分析类产品</p>
            </div>
            <div class="prtit_box4 left" onclick="Ltype()">
                <div id="ptrtit_img4" class="ptrtit_img4_off"></div>
                <p class="prtit_ft">智能网格指导产品</p>
            </div>
        </div>
<!--
        <div class="prtit_box4 left" onclick="changeType('D')">
            <div id="ptrtit_img4" class="ptrtit_img4_off"></div>
            <p class="prtit_ft">观测类产品</p>
        </div>
-->
        <div class="clearfix"></div>

        <div class="prtit_tj_1">
            <div class="left" style="font-weight:bold;color:#373d41;line-height:40px;letter-spacing:3px;letter-spacing:0;">发&nbsp;布&nbsp;单&nbsp;位：</div>
            <p class="prtit_tj1 left" id="depart">
                <span class="selected select bg_img1">全部</span>
                    <span class="select" th:each="list:${departs}">[[${list.deptName}]]</span>
            </p>
            <div class="prtit_bt1 right departFlag" onclick="departMore()"></div>
            <div class="clearfix"></div>
        </div>
        <div class="prtit_tj_1">
            <div class="left" style="font-weight:bold;color:#373d41;line-height:40px;letter-spacing:15px;letter-spacing:0;">要&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;素：</div>
            <p class="prtit_tj1 left" id="element">
                <span class="selected select bg_img1">全部</span>
                    <span class="select" th:each="listForec:${forecastElementEntity}">[[${listForec.elementName}]]</span>
            </p>
            <div class="prtit_bt1 right elementFlag" onclick="elementMore()"></div>
            <div class="clearfix"></div>
        </div>
        <div class="prtit_tj_1">
            <div class="left" style="font-weight:bold;color:#373d41;line-height:40px;letter-spacing:15px;letter-spacing:0;">区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：</div>
            <p class="prtit_tj1 left" id="area">
                <span class="selected select bg_img1">全部</span>
                    <span class="select" th:each="listocean:${oceanAreaEntity}">[[${listocean.areaName}]]</span>
            </p>
            <div class="prtit_bt1 right areaFlag" onclick="areaMore()"></div>
            <div class="clearfix"></div>
        </div>
        <div class="prtit_tj_1" style="padding-bottom:50px;">
            <div class="left" style="font-weight:bold;color:#373d41;line-height:40px;letter-spacing:15px;letter-spacing:0;">模&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;式：</div>
            <p class="prtit_tj1 left" id="mode">
                <span class="selected select bg_img1">全部</span>
                    <span class="select" th:each="listmode:${modeEntity}" th:if="${listmode.modeName ne null}">[[${listmode.modeName}]]</span>
            </p>
            <div class="prtit_bt1 right modeFlag" onclick="modeMore()"></div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="prt_cont2_box">
    <div class="prt_cont2">
        <span th:each="index:${#numbers.sequence(0,11)}">
            <div class="prtit_card left"
                 style="background: #FFFFFF;box-shadow: rgba(0, 0, 0, 0.4) 6px 12px 14px 0px;border-radius: 4px 4px 4px 4px;opacity: 1;">
                <div class="prtit_ctop" style="border-radius: 4px"></div>
                <div class="prtit_ccet left" style="padding-top:40px;">
                    <div class="yaosu1 left"></div>
                    <span class="yaosu_tit left">要素：</span>
                    <span class="yaosu_xinx left"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="prtit_ccet2 left" style="padding-top:40px;">
                    <div class="yaosu2 left"></div>
                    <span class="yaosu_tit left">覆盖海区：</span>
                    <span class="yaosu_xinx left"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="prtit_ccet left">
                    <div class="yaosu3 left"></div>
                    <span class="yaosu_tit left">分辨率：</span>
                    <span class="yaosu_xinx left"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="prtit_ccet2 left">
                    <div class="yaosu4 left"></div>
                    <span class="yaosu_tit left">预报时效：</span>
                    <span class="yaosu_xinx left"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="prtit_ccet left">
                    <div class="yaosu5 left"></div>
                    <span class="yaosu_tit left">文件格式：</span>
                    <span class="yaosu_xinx left"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="prtit_ccet2 left">
                    <div class="yaosu6 left"></div>
                    <span class="yaosu_tit left">起报时间：</span>
                    <span class="yaosu_xinx left" style="font-size:12px;"></span>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
                <div class="menu">
                    <div style="margin-left: 44px;">
                        <a>
                            <div class="prtit_bt2 left" style="margin-left:20px;border-radius: 12px">详情</div>
                        </a>
                        <a>
                            <div class="prtit_bt2 left" style="border-radius: 12px">订阅</div>
                        </a>
                        <a>
                            <div class="prtit_bt2 left" style="margin-right:10px;border-radius: 12px">下载</div>
                        </a>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </span>
        <div class="clearfix">
            <ul style="float:right" id="example"></ul>
        </div>

    </div>
</div>
<div id="footer"></div>

</body>
<script>
    var type = sessionStorage.getItem("type");
    if(type === 'N'){
        changeType('N')
    }
    if(type === 'A'){
        changeType('A')
    }
    if(type === 'R'){
        changeType('R')
    }

</script>
<!--<th:block th:include="include :: footer"/>-->
<script th:src="@{/ocean/js/product.js}"></script>
<script th:src="@{/ocean/js/bootstrap-paginator.js}"></script>
<script>
    /**
     * 底部
     */
    footer();
    function footer() {
        $('#footer').load("/home/footer");
    }
    function loadhref(url) {
        //debugger
        $("#test").load(url)
    }
    function detail(url){
        $("#test").load(url)
    }

    function toHistory(ctx){
        clearIntroduceSession();
        window.location.href = ctx + "/introduce.do?toHistory";
    }

    //清空产品浏览中的session
    function clearIntroduceSession(){
        sessionStorage.removeItem('page');
        sessionStorage.removeItem('depart');
        sessionStorage.removeItem('area');
        sessionStorage.removeItem('element');
        sessionStorage.removeItem('mode');
        sessionStorage.removeItem('typeValue');
    }

    /**
     * L类产品
     * @constructor
     */
    function Ltype() {
        $("#test").load("/home/productBrowsing/ltype")
    }
</script>
<style>
    .select {
        border-radius: 0px !important;
        border: solid 0px #999 !important;
    }
</style>
</html>
